// 搜索栏的参数配置
import { DomForT, defaultDom, SelectType, fieldForm } from '../index'
import SetupSearchFormItem from './SetupSearchFormItem.vue'
interface FormTypeT {
  label: string
  value: string
  template: string
}
/** 搜索栏可用的类型 */
const searchFormTypeList: FormTypeT[] = [
  {
    label: '输入框',
    value: 'Input',
    template: 'Input'
  },
  {
    label: '选择框',
    value: 'Select',
    template: 'Select'
  },
  {
    label: '树结构',
    value: 'TreeSelect',
    template: 'TreeSelect'
  },
  {
    label: '单个日期',
    value: 'DatePicker',
    template: 'DatePicker'
  },
  {
    label: '复数日期',
    value: 'DatePicker',
    template: 'DatePickers'
  }
]
// 搜索栏的form配置项列表
const searchForm: SelectType[] = fieldForm
/** 搜索栏整合表单 */
const SearchFormComponentPropsItemArr: DomForT = {
  Input: {
    componentProps: [
      defaultDom.inputDivider,
      defaultDom.placeholder,
      defaultDom.clearable,
      defaultDom.size
    ],
    componentPropsStyle: [defaultDom.minWidth, defaultDom.maxWidth],
    formItemPropsStyle: [
      defaultDom.FormItemDivider,
      defaultDom.marginRight,
      defaultDom.marginBottom
    ]
  },
  Select: {
    componentProps: [
      defaultDom.inputDivider,
      defaultDom.placeholder,
      defaultDom.clearable,
      defaultDom.size
    ],
    componentPropsProps: [
      defaultDom.propsDivider,
      defaultDom.propsLabel,
      defaultDom.propsValue,
      defaultDom.propsKey
    ],

    componentPropsStyle: [defaultDom.minWidth, defaultDom.maxWidth],
    formItemPropsStyle: [
      defaultDom.FormItemDivider,
      defaultDom.marginRight,
      defaultDom.marginBottom
    ]
  },
  TreeSelect: {
    componentProps: [
      defaultDom.inputDivider,
      defaultDom.placeholder,
      defaultDom.clearable,
      defaultDom.size,
      defaultDom.showCheckbox,
      defaultDom.nodeKey
    ],
    componentPropsProps: [
      defaultDom.propsDivider,
      defaultDom.propsLabel,
      defaultDom.propsValue,
      defaultDom.children,
      defaultDom.disabled
    ],

    componentPropsStyle: [defaultDom.minWidth, defaultDom.maxWidth],
    formItemPropsStyle: [
      defaultDom.FormItemDivider,
      defaultDom.marginRight,
      defaultDom.marginBottom
    ]
  },
  // 单个日期选择器
  DatePicker: {
    componentProps: [
      defaultDom.inputDivider,
      defaultDom.datePickerType,
      defaultDom.valueFormat,
      defaultDom.format,
      defaultDom.clearable,
      defaultDom.placeholder,
      defaultDom.startPlaceholder,
      defaultDom.endPlaceholder,
      defaultDom.size
    ],
    componentPropsStyle: [defaultDom.width, defaultDom.minWidth, defaultDom.maxWidth],
    formItemPropsStyle: [
      defaultDom.FormItemDivider,
      defaultDom.marginRight,
      defaultDom.marginBottom
    ]
  },
  // 复数日期选择器
  DatePickers: {
    componentProps: [
      defaultDom.inputDivider,
      defaultDom.datePickersType,
      defaultDom.valueFormat,
      defaultDom.format,
      defaultDom.clearable,
      defaultDom.placeholder,
      defaultDom.startPlaceholder,
      defaultDom.endPlaceholder,
      defaultDom.size
    ],
    componentPropsStyle: [defaultDom.width, defaultDom.minWidth, defaultDom.maxWidth],
    formItemPropsStyle: [
      defaultDom.FormItemDivider,
      defaultDom.marginRight,
      defaultDom.marginBottom
    ]
  }
}

export { SetupSearchFormItem, SearchFormComponentPropsItemArr, searchFormTypeList, searchForm }
